<template>
	<view class="main h-100vh">
		<Nav class="f" bgColor="#020121">
			<view class="title dispaly-center p-l-32 nav" @click="$goUrl('back')">
				<view class="icon dispaly-align-center">
					<!-- <image src="/static/icon/left.png" mode="aspectFill"></image> -->
					<u-icon name="arrow-left" color="#fff" size="34"></u-icon>
				</view>
				<view class="r-name">订单支付</view>
			</view>
		</Nav>
		<view :style="{marginTop: navHeiht+ 'px' }">
			<view class="content" :style="{height:newsPanelHeight + 'px'}">
				<view class="p-32">
					<view class="t-item" v-for="(item, index) in teacherList" :key="index">
						<view class="top dispaly">
							<view class="avatar">
								<image class="user-avatar" :src="item.avatar" mode="aspectFill"></image>
								<image class="tip" src="/static/icon/tip.png" mode="aspectFill"></image>
							</view>
							<view class="desc">
								<view class="desc-top dispaly-center">
									<view class="name">{{item.name}}</view>
									<view class="lv">{{item.lv}}</view>
								</view>
								<view class="detail over-2">{{item.desc}}</view>
							</view>
						</view>
						<view class="bottom dispaly-just-between">
							<view class="b-left dispaly-center">
								<view class="one-item dispaly-center">
									<view class="t">服务订单</view>
									<view class="c">{{item.num}}单</view>
								</view>
								<view class="one-item dispaly-center">
									<view class="t">报价</view>
									<view class="c">￥{{item.price.toFixed(2)}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="o-box">
						<view class="o-item dispaly-just-between">
							<view class="o-left">支付金额</view>
							<view class="o-right">￥25500.00</view>
						</view>
						<view class="o-item dispaly-just-between">
							<view class="o-left">优惠券</view>
							<view class="o-right dispaly-center" @click="showCoupon = true">
								<view class="txt">{{selCoupon.typeName ? selCoupon.typeName : '请选择'}}</view>
								<u-icon name="arrow-right" color="#7b7b89" size="28"></u-icon>
							</view>
						</view>
					</view>
					<view class="xj">小计￥25000.00</view>
				</view>
				<view class="line"></view>
				<view class="p-32 pay">
					<view class="pay-title">支付方式</view>
					<view class="pay-item dispaly-just-between">
						<view class="pay-left dispaly-center">
							<view class="cover">
								<image src="/static/icon/weca.png" mode="aspectFill"></image>
							</view>
							<view class="text">微信支付</view>
						</view>
						<view class="pay-right">
							<image src="/static/icon/ok.png" mode="aspectFill"></image>
						</view>
					</view>
					<view class="dispaly-align-center btn-box w-100">
						<view class="btn dispaly-align-center">确认支付</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<u-popup v-model="showCoupon" mode="bottom">
		<view class="c-main p-32">
			<view class="title-box dispaly-just-between">
				<view class="left">选择优惠券</view>
				<view class="right" @click="showCoupon = false">
					<u-icon name="close" color="#7b7b89" size="28"></u-icon>
				</view>
			</view>
			<scroll-view scroll-y="true" class="scroll-Y">
				<view class="c-item dispaly-center" v-for="(item, index) in couponList" :key="index">
					<view class="t-left f-2">
						<view class="price">￥{{item.price}}</view>
						<view class="t-name">{{item.name}}</view>
					</view>
					<view class="f-4 middle">
						<view class="type-name">{{item.typeName}}</view>
						<view class="time">有效期至{{item.time}}</view>
					</view>
					<view class="f-1 sy dispaly-align-center" @click="useCoupon(item)">使用</view>
				</view>
			</scroll-view>
		</view>
	</u-popup>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		getElementHeight,
		getScreenSHeight
	} from '@/utils/util'

	const showCoupon = ref(false)
	const couponList = ref([{
		id: 1,
		name: '现金券',
		price: 200,
		typeName: '通用现金券',
		time: '2024-07-27'
	}, ])
	const teacherList = ref([{
		id: 1,
		avatar: 'https://img2.baidu.com/it/u=3853345508,384760633&amp;fm=253&amp;app=120&amp;size=w931&amp;n=0&amp;f=JPEG&amp;fmt=auto?sec=1689958800&amp;t=210689b7eb06d7c78958d7063151cba6',
		name: '坤坤',
		lv: '中级服装师',
		desc: '西服定制量身定做高级手工商务休 闲套装西服定制量身定做高级...',
		num: 216,
		price: 29.00,
		tel: '199999999'
	}])

	// 使用优惠券
	const selCoupon = ref({})
	const useCoupon = (item) => {
		selCoupon.value = item
		showCoupon.value = false
	}

	// 获取元素高度
	const navHeiht = ref(0)
	// 获取屏幕剩余高度
	const newsPanelHeight = ref(0)
	onMounted(async () => {
		for (var i = 0; i < 10; i++) {
			couponList.value.push({
				id: 1,
				name: '现金券',
				price: 200,
				typeName: `通用现金券${i}`,
				time: '2024-07-27'
			})
		}
		const res = await getElementHeight('.f')
		navHeiht.value = res
		newsPanelHeight.value = await getScreenSHeight(navHeiht.value)
	})
</script>

<style lang="scss" scoped>
	.home-content {
		margin: 0 32rpx;
	}

	.main {
		overflow: hidden;
	}

	.r-name {
		color: #fff;
	}

	.title {
		.icon {
			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.c-main {
		.scroll-Y {
			height: 800rpx;
			max-height: 800rpx;
			margin-top: 32rpx;

			.c-item:last-child {
				margin-bottom: 0;
			}

			.c-item {
				padding: 28rpx 40rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				border: 2rpx solid #000000;
				margin-bottom: 16rpx;

				.t-left {
					border-right: 2rpx solid #3D3D3D;

					.price {
						font-family: Source Han Sans, Source Han Sans;
						font-weight: 500;
						font-size: 48rpx;
						color: #020121;
					}

					.t-name {
						font-family: Source Han Sans, Source Han Sans;
						font-weight: 400;
						font-size: 28rpx;
						color: #020121;
					}
				}

				.middle {
					margin-left: 40rpx;

					.type-name {
						font-family: Source Han Sans, Source Han Sans;
						font-weight: 900;
						font-size: 36rpx;
						color: #020121;
					}

					.time {
						margin-top: 10rpx;
						font-family: Source Han Sans, Source Han Sans;
						font-weight: 400;
						font-size: 24rpx;
						color: #020121;
					}
				}

				.sy {
					width: 96rpx;
					height: 48rpx;
					background: #020121;
					border-radius: 24rpx;
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
		}
	}


	.content {
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;

		.top {
			.avatar {
				position: relative;
				margin-right: 16rpx;
				width: 200rpx;
				height: 160rpx;

				.user-avatar {
					width: 200rpx;
					height: 160rpx;
					border-radius: 20rpx;
				}

				.tip {
					width: 48rpx;
					height: 48rpx;
					position: absolute;
					right: 0;
					bottom: 0;
				}
			}
		}

		.desc {
			.desc-top {
				.name {
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 500;
					font-size: 32rpx;
					color: #020121;
					margin-right: 10rpx;
				}

				.lv {
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 500;
					font-size: 20rpx;
					color: #FFFFFF;
					padding: 6rpx 10rpx;
					background: #020121;
					border-radius: 8rpx;
				}
			}

			.detail {
				margin-top: 10rpx;
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 400;
				font-size: 28rpx;
				color: #7B7B89;
				line-height: 40rpx;

			}
		}

		.bottom {
			.b-left {
				margin-top: 16rpx;

				.one-item:first-child {
					margin-right: 40rpx;
				}

				.one-item {
					.t {
						font-family: Source Han Sans, Source Han Sans;
						font-weight: 400;
						font-size: 20rpx;
						color: #7B7B89;
					}

					.c {
						font-family: Source Han Sans, Source Han Sans;
						font-weight: 500;
						font-size: 28rpx;
						color: #020121;
					}
				}
			}
		}

		.xj {
			font-family: Source Han Sans, Source Han Sans;
			font-weight: 900;
			font-size: 34rpx;
			color: #020121;
			display: flex;
			justify-content: flex-end;
			margin-top: 32rpx;
		}

		.o-box {
			margin-top: 38rpx;
			border-bottom: 1rpx solid #f5f5f5;
			padding-bottom: 32rpx;

			.o-item:first-child {
				margin-bottom: 38rpx;
			}

			.o-item {
				.o-left {
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 400;
					font-size: 28rpx;
					color: #020121;
				}

				.o-right {
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 500;
					font-size: 36rpx;
					color: #020121;

					.txt {
						font-family: Source Han Sans, Source Han Sans;
						font-weight: 400;
						font-size: 28rpx;
						color: #B6B6BB;
					}
				}
			}
		}

		.line {
			width: 100%;
			height: 16rpx;
			background: #F5F5F5;
		}

		.pay {
			.btn-box {
				margin-top: 242rpx;

				.btn {
					width: 638rpx;
					height: 100rpx;
					background: linear-gradient(138deg, #7B7B89 0%, #020121 100%);
					border-radius: 60rpx 60rpx 60rpx 60rpx;
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;

				}
			}


			.pay-title {
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 400;
				font-size: 28rpx;
				color: #020121;
				margin-bottom: 24rpx;
			}

			.pay-item {
				.pay-left {
					.cover {
						margin-right: 24rpx;

						image {
							width: 80rpx;
							height: 80rpx;
						}
					}

					.text {
						font-family: Source Han Sans, Source Han Sans;
						font-weight: 900;
						font-size: 28rpx;
						color: #020121;
					}
				}

				.pay-right {
					image {
						width: 32rpx;
						height: 32rpx;
					}
				}
			}
		}
	}
</style>

<style>
	page {
		background-color: #020121;
	}
</style>